 <template>
  <div slot="book" style="margin-top: 20px">
    <a-row type="flex" justify="center">
      <a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
        <!-- 统一检索   纸书 -->
        <a-card :headStyle="headStyles" style="width: 100%">
          <search-box style="margin: 20px auto 40px"></search-box>
          <div>
             <a-row type="flex" justify="center">
              <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="4">
                <a-row
                  type="flex"
                  justify="space-around"
                  align="center"
                  style="margin: 0px 20px"
                >
                  <a-col>
                    <img
                      align="center"
                      :src="picimg"
                      width="80%"
                      style="display: block; margin: 0 auto"
                    />
                  </a-col>

                  <a-col>
                    <a-row>
                      <blockquote>
                        <div
                          class="list-group-item-text text-muted"
                          name="author"
                        >
                          <p>
                            <span style="color: red; line-height: 50px">{{
                              title
                            }}</span>
                          </p>
                        </div>
                      </blockquote>
                    </a-row>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="16">
                 <div>
                   <a-col class="pane___1dzXN">
                     <div class="active___3tl-S">书目信息</div>
                   </a-col>
                    <a-spin :spinning="is_bookinfo_spinning" />
                    <a-row v-for="(item, i) in info" :key="i">
                      <a-col span="4" class="tabtitle"> {{ item.key }}</a-col>
                      <a-col span="18" v-html="item.value"> </a-col>
                      <!-- <a-row>
                        <a-divider dashed />
                      </a-row> -->
                    </a-row>
                  </div>
                  <a-row data-id="intro">
                    <p>{{ intro }}</p>
                  </a-row>
              </a-col>
              <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="4">

              </a-col>
             </a-row>
            <a-row type="flex" justify="center">
              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <a-card>
                  <div class="logo" />
                 
                  <a-row>
                    <a-col
                      :span="i == 0 ? 5 : 3"
                      v-for="(c, i) in bookinfo_columns"
                      :key="i"
                      class="break"
                    >
                      {{ c }}
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-divider dashed />
                  </a-row>
                  <a-row v-for="(d, i) in bookinfo_data" :key="i">
                    <a-col
                      :span="j == 0 ? 5 : 3"
                      v-for="(cd, j) in d"
                      :key="j"
                      v-html="cd"
                      class="break"
                    >
                      {{ cd }}
                    </a-col>
                    <a-divider dashed />
                  </a-row>
                </a-card>
              </a-col>
             
            </a-row>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import axios from "axios";
// import VueAxios from "vue-axios";
import appApi from "../../../utils/api";
import SearchBox from "./common/SearchBox.vue";
export default {
  data: () => ({
    details: [],
    muluText: Array,
    is_bookinfo_visible: false,
    is_spinning: false,
    header: {},
    body: {},
    info: [],
    headStyles: {
      color: "#2780e3",
      background: "#f5f5f5",
    },
    customStyle: "background:#000,color:#2780e3",
    picimg: "",
    title: "",
    bookinfo_columns: [],
    book_already_showing: false,
    is_show_sider_bar: false,
    is_drawer_visible: false,
    drawer_palcement: "left",
    is_bookinfo_spinning: false,
    bookinfo_data: [],
    intro: "",
    deep: true,
  }),
  watch: {},
  components: {
    "search-box": SearchBox,
  },
  computed: {
    // 获取参数
    getquery() {
      return this.$store.state.ebook.books.detailquery;
    },
  },
  methods: {
    // 获取详情
    GetBookInfo: function (marc_no) {
      this.$store.state[
        this.$store.state.Namedparent.name
      ].books.loading_over = false;
      axios.get("./static/config.json").then((res) => {
        this.picimg = res.data.pagerpic + this.$route.query.isbn;
      });

      this.is_bookinfo_spinning = true;
      var that = this;
      var param = { marc_no: marc_no };
      appApi.PagerGetBookInfo(param).then((response) => {
        var data = response.data;
        var x = data;
        that.info = x.info;
        that.bookinfo_columns = x.header;
        that.bookinfo_data = x.body;
        that.is_bookinfo_spinning = false;
      });
    },
  },
  mounted() {
    this.$store.commit("ebook/ChangeDetailQuery", this.$route.query);
    this.GetBookInfo(this.$route.query.id);
    this.title = this.$route.query.searchtitle;
    //this.$store.dispatch(this.$store.state.Namedparent.name+'/epacall');
    // console.log(this.muluText)
    // var marc_no = this.$route.params.id;

    // console.log(" %c htis marc_no: ", "color:brown;", marc_no);
    // if (marc_no == this.bookid) {
    // if (!this.is_bookinfo_visible) {
    // this.is_bookinfo_visible = true;
    // this.GetBookInfo(marc_no);
    // this.$emit("ShowBookid", marc_no);
    // }
    // }
  },
};
</script>

<style scoped>
/deep/.ant-collapse {
  margin: 10px auto !important;
}
/deep/.ant-collapse-header {
  color: blueviolet !important;
}
.text-muted {
  font-size: 15px;
}
.text-muted p {
  border-bottom: 1px dashed #efefef;
  line-height: 2;
}
.text-muteds {
  text-align: center;
  margin: 5px auto;
}
.text-muteds p {
  margin: 0;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.btn-success {
  color: #ffffff;
  background-color: #3fb618;
  border-color: #3fb618;
  text-align: center;
  padding: 10px 10px;
  font-size: 15px;
  display: block;
}
.btn-primary {
  color: #ffffff;
  background-color: #2780e3;
  border-color: #2780e3;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-warning {
  color: #ffffff;
  background-color: #ff7518;
  border-color: #ff7518;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-danger {
  color: #ffffff;
  background-color: #ff0039;
  border-color: #ff0039;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.tabtitle{
  font-weight: bold;
  text-align: right;
  margin-right: 20px;
}
.ant-row{
line-height: 30px;
}
.pane___1dzXN {
    height: 30px;
    background: #eafcff;
    line-height: 30px;
    margin-bottom: 20px;
}
.active___3tl-S {
    color: #fff;
    font-weight: 700;
    background: #00bfe6;
    padding: 0 20px;
    display: inline-block;
}
.break{
  word-break: break-word;
}
</style>
